<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>props的基本使用</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <div id="test2"></div>
    <div id="test3"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 对组件标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">  /*此处一定要写babel*/
        //创建组件
        class Person extends React.Component {
            render() {
                // console.log(this)
                const {name,age,sex}=this.props;
                // this.props.name='jack'   报错 因为props是只读的

                // props是只读的
                return (
                    <ul>
                        <li>姓名:{name}</li>
                        <li>性别:{sex}</li>
                        <li>年龄:{age+1}</li>
                    </ul>
                )
            }
        }
        //定义规则propTypes 小写的
        Person.propTypes={
            //PropTypes是引入的prop-types.js提供的
            name:PropTypes.string.isRequired,//限制name必穿 且为字符串
            sex:PropTypes.string,//性别为字符串
            age:PropTypes.number,//年龄必须是数字
            speak:PropTypes.func,//speak必须是个函数 function是关键字 因此这里是func
        }
        //指定默认标签属性值
        Person.defaultProps={
            sex:'男',//性别默认是男
            age:18  //年龄默认是18
        }

        //渲染组件到页面
        ReactDOM.render(<Person name="tom" speak={speak} />,document.getElementById('test'));

        ReactDOM.render(<Person name="jerry" age={18} sex="男"/>,document.getElementById('test2'));

        const p ={name:'老刘',age:18,sex:'女'} 
        // ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'));
        //上面注释的语法糖 p的格式必须和ul标签中对应上
        ReactDOM.render(<Person {...p}/>,document.getElementById('test3'));

        function speak(){
            console.log('我说话了')
        }
    </script>
</body>

</html>